<template>
	<view :class="pClass">
		<!-- 时间显示 -->
		<view class="flex-a-j" v-if="displayTime" @click="$emit('click')">
			<text class="font-sm text-light-muted pb-4 pt-2">{{displayTime}}</text>
		</view>
		
		<div @longpress="long" @click="$emit('click')" class="ml-auto">
			<!-- 聊天信息列表 -->
			<view v-if="item.type!=='system' && item.isremove===0" class=" flex mt-1 mb-3  flex-row " style="width: fit-content;" :class="isSelf?'flex-row-reverse ml-auto':''">
				
				<free-avatar @click="openUserBase(item)" clickType="navicate" :src="item.from_avatar" size="70"></free-avatar>
				<!-- 群昵称 -->
				<view class="flex flex-column position-relative" :class="isSelf?'align-end':''">
					<text v-if="item.chat_type==='group' && shownickname" style="max-width: 500rpx;margin-bottom: 6rpx;" class=" text-muted font-sm mx-3">{{item.from_name}}</text>
					
					<text v-if=" isSelf" class="iconfont  font-sm position-absolute" :class="outTriangleStyle"  :style="isSelf?'right: 10rpx;top:30rpx':'left: 10rpx;top:30rpx'">&#xe640;</text>
							
					<text v-if=" !isSelf" class="iconfont font-sm position-absolute" :class="outTriangleStyle" :style="isSelf?'right: 10rpx;top:30rpx':'left: 10rpx;top:30rpx'">&#xe609;</text>
					
					<view class=" rounded p-2 mx-3 " :class="outStyle" style="max-width:500rpx;overflow-x: scroll;">
						
						<!-- 文字 -->
						<text v-if="item.type==='text'" style="max-width: 500rpx;overflow-wrap: break-word;" class="font-md ">{{item.data}}</text>
						
						<!-- 表情包 +图片-->
						<free-image @longPress="longPress" :maxWidth="500" :maxHeight="280" imageClass="rounded" @click="$emit('previewImage',item.data)"  v-else-if="item.type==='emoticon'|| item.type==='image'" :src="item.data"></free-image>
						
						<!-- 音频 -->
						<view class="flex-a flex-row" v-else-if="item.type==='audio'" @longpress="stop" @tap="openAudio">
							<image v-if="!isSelf" :src="!audioPlaying ? '/static/audio/audio3.png':'/static/audio/play.gif'"
							style="width: 50rpx;height: 50rpx;" class="mx-1"></image>
							<text class="font">{{item.options.time+'"'}}</text>
						
							<image v-if="isSelf" :src="!audioPlaying ? '/static/audio/audio3.png':'/static/audio/play.gif'"
							style="width: 50rpx;height: 50rpx;" class="mx-1"></image>
						</view>
						
						<!-- 视频 -->
						<free-video  :videoPoster="getOptions.poster" @longPress="longPress" @click="openVideo"  v-else-if="item.type==='video'"></free-video>
						 
						<!-- 卡片 -->
						<view @tap="openUserBase(item)" @longpress="longPress" v-else-if="item.type==='card'" class="flex flex-column bg-light" style="width: 400rpx;margin-bottom: -20rpx;">
							<view class="flex  bg-white pb-1">
								<image :src="getOptions.avatar" style="width: 100rpx;height: 100rpx;" class="rounded"></image>
								<view class="flex flex-column p-1 pt-0 pl-2">
									<text class="font-lg font-weight mb-1">{{getOptions.name}}</text>
									<text class="font-sm text-muted">{{getOptions.username}}</text>
								</view>
							</view>
							<text class="font-small text-muted bg-white border-top" style="padding-top: 5rpx;padding-bottom: 5rpx;">个人名片</text>
						</view>
						
						<!-- 定位 -->
						<view @tap="openLocation(item.options.data)" @longpress="longPress" v-else-if="item.type==='position'" class="flex flex-column bg-light" style="width: 400rpx;margin-bottom: -20rpx;">
							<view class="flex-column  bg-white pb-1">
								<view class="flex flex-column p-1 pt-0 pl-2" v-if="getOptions.data">
									<text class=" font-weight mb-1 font-md" style="width: 400rpx;">{{getOptions.data.name}}</text>
									<text class="font-sm text-light-muted">{{getOptions.data.address | slicePosition}}</text>
									
								</view>
								<image :src="getOptions.imgUrl" mode="aspectFill" style="height: 200rpx;" class="rounded"></image>
							</view>
						</view>
						
					</view>
				</view>
				
				
				
			</view>
			<!-- 撤回显示消息 -->
			<view v-else-if="item.isremove===1" ref="isremove" class="flex-a-j mb-3">
				<text class="text-light-muted font">{{(item.from_id===user.id?'你':(item.chat_type==='group'?item.from_name:'对方'))+'撤回了一条消息'}}</text>
			</view>
			<!-- 系统消息 -->
		
			<view v-if="item.type === 'system'" class="flex-a-j mb-3 py-2">
				<text class="text-light-muted font text-center" style="overflow-wrap: break-word;width: 650rpx;">{{item.data}}</text>
			</view>
			<!-- 发送状态 -->
			
			<view v-if="item.sendStatus && item.sendStatus!=='success'" class="flex-a justify-end px-4" style="margin-top: -30rpx;">
				<text class="font-sm" :class="item.sendStatus==='fail'?'text-danger':'text-muted'">{{item.sendStatus==='fail'?'发送失败':'发送中...'}}</text>
			</view>
			
		</div>
	
		
	</view> 
	
</template>

<script>
	import $T from "@/common/time.js"
	import freeAvatar from "@/components/free-ui/free-avatar.vue"
	import freeImage from "./free-image.vue"
	import freeVideo from "./free-video.vue"
	import {mapState,mapActions} from "vuex"
	// #ifdef APP-PLUS-NVUE
	const animation = weex.requireModule('animation')
	// #endif
	export default {
		components:{
			freeAvatar,freeImage,freeVideo
		},
		props:{
			item:Object,
			index:Number,
		
			pClass:String,
			shownickname:{
				type:Boolean,
				default:false
			}
		},
		
		mounted() {
			
			//注册全局事件(把要执行的函数当参数存起来)
			if(this.item.type==='audio'){
				this.aduioOn(this.onPlayAudio)
			}
			
			//监听撤回
			this.$watch('item.show',(newValue,oldValue)=>{
				
				 if(!newValue){
					 // #ifdef APP-PLUS-NVUE
					 this.$nextTick(()=>{
					 	animation.transition(this.$refs.isremove, {
					 	    styles: {
					 			opacity:0.8
					 	    },
					 	    duration: 800, //ms
					 	    timingFunction: 'ease',
					 	    },()=>{
					 	        
					 	})
					 })
					 // #endif
				 }
			})
		},
		filters:{
			
			sliceName(val){
				  
				 if(val){
					 return val.length>35?val.slice(0,35)+'...':val
				 }
			},
			slicePosition(val){
				if(val){
						return val.length>15?val.slice(0,15)+'...':val
				}
			}
		},
		computed:{
			...mapState({
				user:state=>state.user.user
			}),
			
			getOptions(){
				 
				if(this.item && this.item.options){
					return this.item.options
				}
			},
			//音频时长控制气泡样式
			labelStyle(){
				if(this.item.type==='audio'){
					let time = this.item.options.time || 0
					let width= parseInt(time)/(60/500)
					width = width < 150 ? 150 :width
					return `width:${width}rpx`
				}
			},
			//气泡样式
			outStyle(){
				if(this.hasOutStyle && this.isSelf){
					return 'bg-chat-item'
				}else{
					return 'bg-white'
				}
			},
			//三角形
			outTriangleStyle(){
				if(this.isSelf){
					if(this.hasOutStyle){
						return 'text-chat-item'
					}
					return 'text-white'
				}else{
					return 'text-white'
				}
			},
			//是否有气泡
			hasOutStyle(){
				return this.item.type ==='text'
			},
			isSelf(){
				
				//获取本人id
				let id = this.user.id?this.user.id:0
				return this.item.from_id === id
			},
			//显示时间
			displayTime(){
				let now = this.item.create_time
				
				let lastItem = ''
				if(this.index>0){
					lastItem = this.item.create_time
				}
				
				return $T.getChatTime(now,lastItem)
			},
			//是否能撤回
			canRecall(){
				
				
				let selfTime = this.item.create_time
				let now = new Date().getTime()
				
				return $T.ifRecall(now,selfTime)
				}
		},
		//组件销毁停止播放音频
		destroyed() {
			if(this.item.type==='audio'){
				this.aduioOff(this.onPlayAudio)
			}
			if(this.innerAudioContext){
				this.destroyContext()
			}
		},
		data(){
			return{
				innerAudioContext:null,
				audioPlaying:false,
				//默认封面的宽高
				poster:{
					w:100,
					h:100
				}
			}
		},
		methods:{
			longPress(){
				
			},
			stop(){
				
			},
			...mapActions(['aduioOn','aduioEmit','aduioOff']),
			loadPoster(e){
				
				 this.poster = e
			},
			openLocation(item){
				 
				 uni.openLocation({
					 ...item.location,
					 name:item.name,
					 address:item.address,
					 scale:10,
					 
				 });
			},
			openVideo(){
				
				uni.navigateTo({
					url: '/pages/chat/video/video?url='+this.item.data,
				});
			},
			//监听播放音频全局事件
			onPlayAudio(index){
				 if(this.innerAudioContext){
					 if(this.index!==index){
						 this.innerAudioContext.stop()
					 }
				 }
			},
			//销毁上下文
			destroyContext(){
				this.innerAudioContext.destroy()
				this.innerAudioContext=null
			},
			//播放音频
			openAudio(){
				//通知停止其它音频
				this.aduioEmit(this.index)
				
				if(this.innerAudioContext){
					this.audioPlaying=false
					return this.destroyContext()
				}
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.src = this.item.data;
				this.innerAudioContext.play()
				//监听播放
				this.innerAudioContext.onPlay(()=>{
					this.audioPlaying=true
				})
				//监听暂停
				this.innerAudioContext.onPause(()=>{
					this.audioPlaying=false
				})
				//监听停止
				this.innerAudioContext.onStop(()=>{
					this.audioPlaying=false
				})
				//监听错误
				this.innerAudioContext.onError(()=>{
					this.audioPlaying=false
				})
			},
			//长按事件
			long(e){
				if(this.item.isremove || this.item.type==='system'){
					return
				}
				let x = 0
				let y = 0
				//手机端
				// #ifdef APP-PLUS-NVUE
				if(Array.isArray(e.changedTouches) && e.changedTouches.length>0){
					x = e.changedTouches[0].screenX
					y = e.changedTouches[0].screenY
				}
				// #endif
				// #ifdef H5
				x = e.changedTouches[0].pageX
				y = e.changedTouches[0].pageY
				// #endif
				//小程序
				// #ifdef MP
				x=e.detail.x
				y=e.detail.y
				// #endif
				this.$emit('long',{
					x,
					y,
					index:this.index
				})
			},
			openUserBase(item){
				 // console.log(item)
				 let i = item.type==='card'?this.item.options.id:item.from_id
				
				uni.navigateTo({
					url: '/pages/mail/user-base/user-base?user_id='+i
				});
			}
		},
		
		
		
	}
</script>

<style scoped>
	.chat-animate{
		/* #ifdef APP-PLUS-NVUE */
		opacity: 0;
		/* #endif */
	}
</style>
